<template>
  <el-table :data="tableData">
    <el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop" />
    <el-table-column label="实时值">
      <template #default="scope">
        <span v-memo="[scope.row.realTimeValue]">{{ scope.row.realTimeValue }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
  setup() {
    const tableData = ref([
      { name: '张三', age: 18, realTimeValue: 0 },
      { name: '李四', age: 20, realTimeValue: 0 }
    ]);

    const columns = ref([
      { label: '姓名', prop: 'name' },
      { label: '年龄', prop: 'age' }
    ]);

    // 计算属性用于获取实时值
    const realTimeValues = computed(() => {
      return tableData.value.map(row => row.realTimeValue);
    });

    // 每5秒更新一次实时值
    setInterval(() => {
      tableData.value.forEach(row => {
        row.realTimeValue = Math.random(); // 这里可以替换为实际的实时值获取逻辑
      });
    }, 5000);

    return {
      tableData,
      columns,
      realTimeValues
    };
  }
});
</script>